<!--
 * @Author: yuanweijiang
 * @Date: 2024-01-03 14:19:33
 * @LastEditors: XHM
-->
<template>
	<div class="layout-padding">
		<div class="layout-padding-auto layout-padding-view">
			<el-form :inline="true" :model="state.queryForm" @keyup.enter="getDataList" ref="queryRef" class="flex items-center">
				<el-form-item prop="menuName">
					<el-input placeholder="请输入样式ID" clearable style="max-width: 180px" v-model="state.queryForm.styleName" />
				</el-form-item>
				<el-form-item>
					<el-button @click="query" class="ml10" icon="search" type="primary"> 查询 </el-button>
					<el-button icon="Refresh" @click="resetQuery">重置</el-button>
				</el-form-item>
				<div class="absolute right-8">
					<el-form-item>
						<el-button @click="openStyleDialog('add')" class="ml10" icon="CirclePlus" type="primary"> 创建样式 </el-button>
					</el-form-item>
				</div>
			</el-form>
			<el-table
				ref="tableRef"
				:data="state.dataList"
				:cell-style="tableStyle.cellStyle"
				:header-cell-style="tableStyle?.headerCellStyle"
				@filter-change="filterChange"
			>
				<el-table-column prop="styleType" label="类型" width="100" :filters="typeDict" column-key="styleType" :filter-multiple="false">
					<template #default="scope">
						<div class="type-tag" :style="typeColor[scope.row.styleType - 1]">{{ filterDict(scope.row.styleType) }}</div>
					</template>
				</el-table-column>
				<el-table-column prop="styleName" label="样式ID" show-overflow-tooltip />
				<el-table-column prop="styleNameCh" label="样式名称" show-overflow-tooltip />
				<el-table-column prop="styleFormat" label="格式" show-overflow-tooltip />

				<el-table-column
					prop="onEnable"
					label="启用状态"
					:filters="[
						{ text: '启用', value: 'true' },
						{ text: '禁止', value: 'false' },
					]"
					column-key="onEnable"
					:filter-multiple="false"
				>
					<template #default="scope">
						<el-tag :type="scope.row.onEnable ? 'success' : 'info'">{{ scope.row.onEnable ? '启用' : '禁止' }}</el-tag>
					</template>
				</el-table-column>

				<el-table-column prop="defaultStr" label="是否默认">
					<template #default="scope">
						<el-switch v-model="scope.row.defaultStr" @change="changeStatus(scope.row)" :disabled="scope.row.projectNameCh" />
					</template>
				</el-table-column>

				<el-table-column
					prop="projectNameCh"
					label="项目"
					:filters="projectOptions"
					column-key="projectName"
					show-overflow-tooltip
					:filter-multiple="false"
				>
				</el-table-column>
				<el-table-column prop="styleBack" label="样式说明" show-overflow-tooltip />
				<el-table-column label="预览">
					<template #default="scope">
						<span @click="lookFile(scope.row)" class="jColor">查看</span>
					</template>
				</el-table-column>
				<el-table-column label="管理">
					<template #default="scope">
						<el-tooltip content="下载" placement="bottom" effect="light">
							<i class="iconfont icon-daoruyunduan jColor mr-4" @click="uploadDownloadHandle(scope.row)"></i>
						</el-tooltip>
						<i class="iconfont icon-shanchu jColor" @click="handleDelete(scope.row)"></i>
					</template>
				</el-table-column>
			</el-table>
			<pagination v-bind="state.pagination" @current-change="currentChangeHandle" @size-change="sizeChangeHandle"> </pagination>
		</div>
		<styleDialog @refresh="getDataList()" ref="layerDialogRef" />
		<layerlook ref="layerlookRef" />
	</div>
</template>

<script lang="ts" name="layerManagement" setup>
import { pageList, deleteStyle, uploadDownload, editDefault } from '/@/api/resource/style';
import { BasicTableProps, useTable } from '/@/hooks/table';
import { useMessage, useMessageBox } from '/@/hooks/message';
import { handleBlobFile } from '/@/utils/other';
import { useUserInfo } from '/@/stores/userInfo';
import { useI18n } from 'vue-i18n';
import layerLook from './components/style/layerLook.vue';
// 引入组件
const styleDialog = defineAsyncComponent(() => import('./components/style/styleDialog.vue'));
const layerlook = defineAsyncComponent(() => import('./components/style/layerLook.vue'));
const { t } = useI18n();
// 定义变量内容
const tableRef = ref();
const queryRef = ref();
const layerDialogRef = ref();
const layerlookRef = ref();
const typeDict = ref([
	{
		text: '点',
		value: '1',
	},
	{
		text: '线',
		value: '2',
	},
	{
		text: '面',
		value: '3',
	},
	{
		text: '栅格图层',
		value: '4',
	},
]);

const typeColor = ref([
	{ background: '#c0dfff', color: '#61aaff' },
	{ background: '#c2d4ff', color: '#61aaff' },
	{ background: '#ffe2c1', color: '#61aaff' },
	{ background: '#dbd7ff', color: '#9a8aff' },
]);
const styleTypeArr = ref([
	{
		text: '点',
		value: '1',
	},
	{
		text: '线',
		value: '2',
	},
	{
		text: '面',
		value: '3',
	},
	{
		text: '栅格图层',
		value: '4',
	},
]);
const projectOptions = computed(() => {
	const userInfo = useUserInfo().userInfos.projectList;
	return userInfo.map((item) => ({
		text: item.label,
		value: item.value,
	}));
});
const state: BasicTableProps = reactive<BasicTableProps>({
	pageList: pageList,
	queryForm: {},
	isPage: true,
});

const { getDataList, tableStyle, currentChangeHandle, sizeChangeHandle } = useTable(state);

// 搜索事件
const query = () => {
	state.dataList = [];
	getDataList();
};

//表格筛选
const filterChange = (filter) => {
	if (filter['styleType']) {
		state.queryForm.styleType = filter.styleType.join(',');
		getDataList();
	} else if (filter['onEnable']) {
		state.queryForm.onEnable = filter.onEnable.join(',');
		getDataList();
	} else if (filter['projectName']) {
		state.queryForm.projectName = filter.projectName.join(',');
		getDataList();
	}
};

//映射样式类型
function filterDict(val: any) {
	return styleTypeArr.value.find((item) => item.value == val).text;
}
// 清空搜索条件
const resetQuery = () => {
	state.queryForm = {};
	queryRef.value.resetFields();
	state.dataList = [];
	getDataList();
};

const changeStatus = async (row: any) => {
	await editDefault({
		geoStyleId: row.geoStyleId,
		defaultStr: row.defaultStr,
	});
	useMessage().success('修改成功');
	getDataList();
};

//预览图层
function lookFile(row: any) {
	layerlookRef.value.openDialog(row.sldBody);
}
// 打开图层弹窗
const openStyleDialog = (type?: string, row?: any) => {
	layerDialogRef.value.openDialog(type, row);
};

//下载文件
async function uploadDownloadHandle(row: any) {
	const data = await uploadDownload(row.styleName);
	let fileName = row.styleName;
	fileName += `.${row.styleFormat}`;
	handleBlobFile(data, fileName, 'application/zip');
}

// 删除操作
const handleDelete = async (row: any) => {
	try {
		await useMessageBox().confirm(t('common.delConfirmText'));
	} catch {
		return;
	}

	try {
		let res = await deleteStyle({ styleName: row.styleName, wokeSpaceName: row.projectName, geoStyleId: row.geoStyleId });
		if(res.code==0){
		useMessage().success(t('common.delSuccessText'));
	}
		getDataList();
	} catch (err: any) {
		useMessage().error(err.msg);
	}
};
</script>
